<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>My JSP 'trim.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/amazeui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/app.css">
<link
	href="${pageContext.request.contextPath}/style/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/style/layui/css/layui.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/style/js/amazeui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<style type="text/css">
label {
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	color: #000000;
}

th {
	text-align: center;
}
</style>

</head>

<body>
	<div
		style="width:100%;background-color:#F8F8FF;height:100%;position: absolute;top:1px;left:1px">
		<div id="searchdiv"
			style="border:1px solid #96c2f1;background:#eff7ff;height:12%;width:100%;position: absolute;top:5px;left:5px">
			<div class="row" style="position: relative;left:8px;top:15px">
				<form id="searchform">
					<div class="col-xs-1" style="text-align:right;line-height:25px">
						<label>活动名</label>
					</div>
					<div class="col-xs-2"
						style="text-align:left;padding:0px; margin:0px;">

						<select class="form-control" name="state" id="state">
							<option value="-1">所有</option>
							<c:forEach var="list" items="${codelist}">
								<option value="${list.codeValue }">${list.codeName }
							</c:forEach>
						</select>
					</div>

					<div class="col-xs-3" style="text-align:center;">
						<button type="button" class="btn btn-primary" id="search">
							<i class="am-icon-search"></i> 查询
						</button>
					</div>
				</form>
			</div>
		</div>

		<div id="operatediv"
			style="height:7%;width:100%;position: absolute;top:90px;left:15px">
			<button id="refrsh" class="am-btn am-btn-primary am-btn-xs"
				onclick="history.go(0)" type="button">
				<i class="glyphicon glyphicon-refresh"></i>刷新
			</button>
			<button id="add" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-plus"></i>增加
			</button>
			<button id="edit" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-pencil"></i>编辑
			</button>
			<button id="delete" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-remove"></i>删除
			</button>
			<button id="export" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-download"></i>导出
			</button>
		</div>
		<div id="tablediv"
			style="height:70%;width:100%;position: absolute;top:140px;left:15px">
			<table class="layui-table" id="" border="1px">

				<thead>
					<tr>
						<th width="5px"><input id='allid' type='checkbox'></th>
						<th>编号</th>
						<th>活动名</th>
						<th>所属茶园</th>
						<th>操作人</th>
						<th>操作时间</th>

					</tr>
				<tbody id="table">
				</tbody>
			</table>
			<div id="page" style="text-align:center"></div>
		</div>


	</div>
</body>
<script type="text/javascript">
	$("#export").click(function() {

		var myurl = "${pageContext.request.contextPath}/trim/export";
		var form = $("<form>");
		form.attr("style", "display:none");
		form.attr("method", "post");
		form.attr("action", myurl);
		$("body").append(form);
		form.submit();
	});
	$(document).ready(function() {

		//ajax请求后台数据
		getlist();
		//点击搜索时 搜索数据
		$("#search").click(function() {
			getlist();
			currentPageAllAppoint = 1; //当点击搜索的时候，应该回到第一页
			toPage();//然后进行分页的初始化

		})
		toPage();
	});

	//分页参数设置 这些全局变量关系到分页的功能
	var startAllAppoint = 0;//开始页数
	var limitAllAppoint = 8;//每页显示数据条数
	var currentPageAllAppoint = 1;//当前页数
	var dataLength = 0;//数据总条数
	//ajax请求后台数据
	function getlist() {
		$.ajax({
			type : "post",
			async : false,
			dataType : "json",
			url : "${pageContext.request.contextPath}/trim/list?start="
					+ startAllAppoint + "&limit=" + limitAllAppoint,
			data : $("#searchform").serialize(),
			success : function(data, status) {
				gettable(data.root);
				startAllAppoint = data.currentResult;//当前页数(后台返回)
				dataLength = data.total;//数据总条数
			}
		});

	}
	function gettable(data) {
		var s = "";
		$
				.each(
						data,
						function(v, o) {
							s += "<tr><td><input  type='checkbox' value="+o.farmTrimid +" /></td>";
							s += "<td>" + o.farmTrimid + "</td>";
							s += "<td>" + o.code.codeName + "</td>";
							s += "<td>" + o.land.landName + "</td>";
							s += "<td>" + o.user.userName + "</td>";
							s += "<td>" + o.farmTime + "</td>";

						});
		if (data.length > 0) {
			$("#page").show();
			$("#table").html(s);
		} else {
			$("#page").hide();
			$("#table")
					.html(
							"<br/><span style='width:100%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
		}

	}

	function toPage() {

		layui
				.use(
						[ 'form', 'laypage', 'layedit', 'layer', 'laydate' ],
						function() {
							var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate, laypage = layui.laypage;

							var nums = 10;
							//调用分页
							laypage.render({
								elem : 'page',
								count : dataLength //这个是后台返回的数据的总条数
								,
								limit : limitAllAppoint //每页显示的数据的条数,layui会根据count，limit进行分页的计算
								,
								curr : currentPageAllAppoint,
								skip : true,
								jump : function(obj, first) {

									currentPageAllAppoint = obj.curr;
									startAllAppoint = (obj.curr - 1)
											* obj.limit;
									//document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr);
									if (!first) { //一定要加此判断，否则初始时会无限刷新
										getlist();//一定要把翻页的ajax请求放到这里，不然会请求两次。
										//location.href = '?page='+obj.curr;
									}
								}
							});

						});
	};

	var isCheckAll = false;
	$("#allid").click(function() {
		if (!isCheckAll) {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", true);

			});
			isCheckAll = true;
		} else {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", false);
				isCheckAll = false;
			});
		}
	});

	$("#id").click(function() {
		if ($(this).is(':checked')) {
		} else {
			isCheckAll = false;
			$("#allid").prop("checked", false);
		}
	});
</script>

<script type="text/javascript">
	layui
			.use(
					[ 'layer', 'table', 'laypage' ],
					function() {
						var layer = layui.layer //获得layer模块
						, table = layui.table, page = layui.laypage; //获得laypage模块

						//使用模块
						$("#add").click(function() {

							layer.open({
								type : 2,
								title : '添加除草、修剪',
								content : [ 'add', 'no' ],
								area : [ '400px', '400px' ],
								end : function() {
									location.reload();
								}
							});
						});

						$("#edit").click(function() {
							var len = 0;
							var id = 0;
							$.each($('input:checkbox:checked'), function() {
								// alert($('input[type=checkbox]:checked').length+","+$(this).val());
								len = $('input[type=checkbox]:checked').length;
								id = $(this).val();
							});
							if (len > 1 || len < 1) {
								layer.open({
									title : '农事信息修改',
									content : '请选择一条数据'
								});
							} else {
								layer.open({
									type : 2,
									title : '农事信息修改',
									content : [ 'edit?id=' + id, 'no' ],
									area : [ '500px', '500px' ],
									end : function() {
										location.reload();
									}

								});
							}
						});
						$("#delete")
								.click(
										function() {
											var idvalue = new Array();
											$.each($('input:checkbox:checked'),
													function() {
														// alert($('input[type=checkbox]:checked').length+","+$(this).val());
														idvalue.push($(this)
																.val());
													});
											if (idvalue.length == 0) {
												layer.open({
													title : '删除用户',
													content : '未选择用户！',
												});
											} else {
												layer
														.open({
															title : '删除数据',
															content : '确认删除数据？',
															btn : [ '确认', '取消' ],
															yes : function(
																	index,
																	layero) {
																$
																		.ajax({
																			type : "post",
																			url : "${pageContext.request.contextPath}/trim/delete",
																			data : {
																				ids : idvalue
																			},
																			dataType : "text",
																			traditional : true,//这里设为true就可以了
																			success : function(
																					res) {
																				if (res == "success") {
																					layer
																							.alert(
																									'数据删除成功',
																									{
																										skin : 'layui-layer-molv' //样式类名
																										,
																										closeBtn : 0,
																										end : function() {
																											location
																													.reload();
																										}
																									},
																									function() {
																										layer
																												.closeAll();
																									});
																				} else {
																					layer
																							.alert(
																									'数据删除失败',
																									{
																										skin : 'layui-layer-molv' //样式类名
																										,
																										closeBtn : 0
																									},
																									function() {
																										layer
																												.closeAll();
																									});
																				}
																			},

																		});
															}
														});
											}
										});
					});
</script>

</html>
